<template>
	<div class="ticket_entry">
		<x-header title="代金券" class="blues" :left-options="{backText: ''}">
			<a slot="right" style="font-size:.3rem;color:#fff;" @click="goHelp">帮助中心</a>
		</x-header>
		<div class="content">
			<div class="ticket_types">
				<div class="ticket_type">
					<div class="free_time" @click="goDrainingCoupons">
						<div class="imgs">
							<img src="../../assets/images/groups/1.png" alt="" />
						</div>
						<div class="info">
                            <h3>闲时引流<img src="../../assets/images/groups/right.jpg" alt="" /></h3>
                            <p>非高峰期搞大力促销，可免费加入平台活动和资源位，吸引消费赚不停。</p>
                            <button>优秀案例</button>
                        </div>
					</div>
					<div class="free_time" @click="goTicketRelease">
						<div class="imgs">
							<img src="../../assets/images/groups/2.png" alt="" />
						</div>
						<div class="info">
							<h3>日常折扣<img src="../../assets/images/groups/right.jpg" alt="" /></h3>
							<p>顾客想怎么花就怎么花，提升桌均消费不再是难题，超过60万商家正在用。</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie'
	import { XHeader, Tab, TabItem } from 'vux';
	export default {
		name: 'ticket_entry',
		data() {
			return {
				msg: ''
			}
		},
		components: {
			XHeader,
			Tab,
			TabItem
		},
		computed: {

		},
		created() {

		},
		methods: {
			//帮助中心
			goHelp() {
				this.$router.push('/customerService');
			},
			//引流券
			goDrainingCoupons(){
				this.$router.push('/drainingCoupons');
			},
            //发布代金券
            goTicketRelease(){
			    this.$router.push('/ticketRelease');
            },
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.ticket_entry {
		.content {
			background: #fff;
			text-align: left;
			.ticket_types{
				.ticket_type{
					display: flex;
					flex-direction: column;
					.free_time{
						display: flex;
						padding: .28rem .26rem .24rem .22rem;
						border-bottom: 1px solid #ececec;
						.imgs{
							display: flex;
							img{
								width: 1.2rem;
								height: 1.2rem;
							}
						}
						.info{
							margin-left: .26rem;
							h3{
								display: flex;
								justify-content: space-between;
								align-items: center;
								font-size: .31rem;
								color: #3e3e3e;
								img{
									width: .16rem;
									height: .26rem;
								}
							}
							p{
								margin: .2rem 0;
								width: 94%;
								font-size: .28rem;
								color: #949494;
							}
							button{
								width: 1.4rem;
								height: .46rem;
								line-height: .46rem;
								border: none;
								border: 1px solid #d5d5d5;
								border-radius: .05rem;
								background: #fff;
								font-size: .26rem;
								color: #4c4c4c;
							}
						}
					}
				}
			}
		}
	}
</style>
